<template>
  <div id="app">
    <!-- 头部导航 -->
    <van-overlay class="head_nav_wrap" :show="show" @click="hideoverly">
      <div class="moban_wrapper" @click.stop>
        <ul class="moban_wrapper_collapse">
          <!-- 删除图标 -->
          <li class="moban_wrapper_collapse_li appRight paadings imgInto">
            <img
              @click="handelDelete"
              src="@/assets/Homepage_desktop/delet.png"
              alt=""
            />
          </li>
          <li class="moban_wrapper_collapse_li paadings" @click="strive('/')">
            首页
          </li>
          <!-- 产品 -->
          <li class="moban_wrapper_collapse_li">
            <div class="moban_wrapper_collapse_one tydisplay paadings" @click="control">
              <p>产品</p>
              <span class="appLeft">
                <img
                  :class="oneone == true ? 'active' : 'baibai'"
                  src="@/assets/Homepage_desktop/xjt.png"
                  alt=""
                />
              </span>
            </div>
            <div class="moban_wrapper_collapse_two" v-show="isShow">
              <div class="moban_wrapper_collapse_two_item paadings" @click="strive('/whatsapp')">
                WhtasApp拓客
              </div>
              <div class="moban_wrapper_collapse_two_item paadings" @click="strive('/facebook')">
                Facebook拓客
              </div>
              <div class="moban_wrapper_collapse_two_item paadings" @click="strive('/mayday')">
                51客服系统
              </div>
            </div>
          </li>
          <li class="moban_wrapper_collapse_li paadings" @click="strive('/extens')">海外引流推广</li>
          <!-- 出海资讯 -->
          <li class="moban_wrapper_collapse_li">
            <div class="moban_wrapper_collapse_one tydisplay paadings" @click="controlzh">
              <p>出海资讯</p>
              <span class="appLeft">
                <img
                  :class="oneonezh == true ? 'activezh' : 'baibai'"
                  src="@/assets/Homepage_desktop/xjt.png"
                  alt=""
                />
              </span>
            </div>
            <div class="moban_wrapper_collapse_two" v-show="isShowzh">
              <div class="moban_wrapper_collapse_two_item paadings" @click="strive('/xinxlist')">
                WhtasApp
              </div>
            </div>
          </li>
          <li class="moban_wrapper_collapse_li paadings" @click="strive('/we')">联系我们</li>
          <li class="moban_wrapper_collapse_li paadings" @click="go('http://dh.51ch.cc')">全球社交流量导航</li>
        </ul>
      </div>
    </van-overlay>

    <div class="main_wrap" :class="isacte ? 'handle_tran_x' : ''">
      <!-- 头部 -->
      <headz></headz>
      <router-view />
      <!-- 尾部 -->
      <footerz></footerz>
    </div>
  </div>
</template>

<script>
import headz from "@/components/head";
import footerz from "@/components/footer";

export default {
  name: "App",
  components: {
    headz,
    footerz,
  },
  data() {
    return {
      isacte: false,
      show: false,
      isShow: false,
      isShowzh: false,
      oneone: false,
      oneonezh: false,
    };
  },
  methods: {
    strive(goto){ //跳转页面
      this.show = false;
      this.isacte = false;
      this.$router.push(goto)
    },
    go(url) {
      window.location.href = url || '';
    },
    moveright() {
      this.isacte = !this.isacte;
      this.show = true;
    },
    hideoverly() {
      this.isacte = false;
      this.show = false;
    },
    handelDelete() {
      //点击删除图标
      this.show = false;
      this.isacte = false;
    },
    control() {
      //点击产品事件==>展示的二级菜单
      this.isShow = !this.isShow;
      this.oneone = !this.oneone;
    },
    controlzh() {
      //点击出海资讯==>展示的二级菜单
      this.isShowzh = !this.isShowzh;
      this.oneonezh = !this.oneonezh;
    },
  },
};
</script>

<style>
.pt42{
  padding-top: 42px;
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
.active,
.activezh {
  transform: rotate(180deg);
  animation: turn .3s linear;
}
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
.baibai{
  transform: rotate(0deg);
  transform-origin: center;
  animation: turnt .3s linear;
}
@keyframes turnt {
  0% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
.main_wrap {
  transition: transform 0.3s linear;
}
.tydisplay {
  display: flex;
}
.handle_tran_x {
  transform: translateX(80%);
}
.moban_wrapper {
  height: 100%;
  background: #4a90e2;
  color: #fff;
  width: 300px;
}
.appRight {
  text-align: right;
}
.appLeft {
  border-left: 2px solid #4485d2;
  display: inline-block;
  width: 15%;
  text-align: center;
}
.paadings {
  padding: 12px 16px;
}
.moban_wrapper_collapse_li {
  border-bottom: 1px solid #4c89d4;
  font-size: 1.3em;
}
.moban_wrapper_collapse_one > p {
  flex: 1;
}
.moban_wrapper_collapse_li img {
  width: 50%;
  vertical-align: middle;
  padding: 0 0 0 8px;
}
.imgInto > img {
  width: 10%;
  text-align: right;
  padding: 0 0 0 8px;
}
.moban_wrapper_collapse .moban_wrapper_collapse_two {
  background: #4688d6;
}
.moban_wrapper_collapse_two_item {
  border-bottom: 2px solid #4485d2;
}
.moban_wrapper_collapse_li a{
  color: #fff;
}
</style>
